<template>
  <Popups :isShow.sync="isPopup" :popBodyStyle="{padding: 0}" :popFooterStyle="{margin: 0}" title="选择号码">
    <div slot="body" class="number-box" ref="numberBox">
      <Scroll :scroll-bars="false" :scroll-momentum="true" v-for="(item, index) in selectNumberLen" :key="index" :data="selectNumber[index]" :ref="`scroll_${index}`" class="scroll-box" @bindScrollEnd="handleNumber($event, index)">
        <template slot="body">
          <ul class="number-list">
            <li>&nbsp;</li>
            <!-- eslint-disable -->
            <li
              v-for="(item, i) in number"
              :key="`${i}-${i}`"
              :class="['item', selectNumber[index] == item ? 'active' : null]"
            >{{item}}</li>
            <li ref="item" class="item">&nbsp;</li>
          </ul>
        </template>
      </Scroll>
      <div class="underlying"></div>
    </div>
    <div slot="footer" class="number-footer">
      <button type="button" @click="handleSelectedNumber" class="number-btn btn btn-pink">确定</button>
    </div>
  </Popups>
</template>

<script>
import { Popups } from "~/popOut";
import { Scroll } from "~/vScroll";

export default {
  name: "SelectNumber",
  props: {
    // 必填，窗口显示状态
    isShow: {
      type: Boolean,
      required: true
    },
    // 选填, 选择号码的数量, 默认：3
    selectNumberLen: {
      type: Number,
      default: 3
    },
    // 选填，如果selectNumberLen设置了则这个也需要设置。初始化号码，默认3位
    defaultNumbers: {
      type: Array,
      default: () => [0, 0, 0]
    }
  },
  components: {
    Popups,
    Scroll
  },
  data() {
    return {
      // 窗口状态
      isPopup: this.isShow,
      // 选择的数组
      number: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      // 选择的数字
      selectNumber: this.defaultNumbers,
      // 单个元素
      itemEl: null,
      // 单个元素的高度
      itemHeight: 0
    };
  },
  watch: {
    isShow(nextValue) {
      this.isPopup = nextValue;
      if (nextValue) {
        this.selectNumber = this.defaultNumbers;
        this.selectNumber.splice(this.selectNumberLen);
        this.$nextTick(() => {
          /* eslint-disable */
          const refs = this.$refs;
          // 计算每一个的高度
          const height = this.itemHeight + this.itemMarginTop;
          const numberEl = this.$refs.numberBox;
          const numberElWidth = parseInt(this.getStyle(numberEl, "width"));
          this.selectNumber.forEach((num, index) => {
            refs[`scroll_${index}`][0].$el.style.width =
              numberElWidth / this.selectNumberLen + "px";
            refs[`scroll_${index}`][0].scrollTo(0, ~(num * height) + 1);
            refs[`scroll_${index}`][0].refresh();
          });
        });
      }
    },
    isPopup(nextValue) {
      this.$emit("update:isShow", nextValue);
    }
  },
  mounted() {
    this.itemEl = this.$refs.item[0];
    // 获取数字单个元素的高度
    this.itemHeight = this.getElHeight(this.itemEl);
    // 获取数字单个元素的顶部外边距
    this.itemMarginTop = parseFloat(
      this.getStyle(this.itemEl, "marginTop"),
      10
    );
  },
  methods: {
    /**
     * 处理选择完号码回调给父窗口
     */
    handleSelectedNumber() {
      this.selectNumber.forEach((num, index) => {
        this.$refs[`scroll_${index}`][0].stop();
      });
      // 把选择的号码传递给父窗口
      this.$emit("handleSelectedNumber", this.selectNumber);
      // 关闭窗口
      this.close();
    },
    /**
     * 关闭弹框
     */
    close() {
      this.isPopup = false;
      // this.$emit("update:isShow", this.isPopup);
    },
    /**
     * 处理选择一个号码
     */
    handleNumber(event, index) {
      /* eslint-disable */
      // 获取当前滚动的位置并取正值
      const Y = event.y < 0 ? ~event.y + 1 : event.y;
      // 计算每一个的高度
      const height = this.itemHeight + this.itemMarginTop;
      // 计算当前在第几个
      const currentNumber = Math.round((Y - height) / height) + 1;
      // 设置当前数字的位置
      event.scrollTo(0, ~(currentNumber * height) + 1);
      const selectNumber = this.selectNumber;
      // 直接赋值数组是不响应的，所以要使用变异方法
      this.selectNumber.splice(index, 1, currentNumber);
    },
    /**
     * 获取单个元素高度
     * 包含padding，border
     * @param [Element] el html元素
     */
    getElHeight(el) {
      const height = parseFloat(this.getStyle(el, "height"), 10);
      const paddingTop = parseFloat(this.getStyle(el, "paddingTop"), 10);
      const paddingBottom = parseFloat(this.getStyle(el, "paddingBottom"), 10);
      const borderTop = parseFloat(this.getStyle(el, "borderTopWidth"), 10);
      const borderBottom = parseFloat(
        this.getStyle(el, "borderBottomWidth"),
        10
      );
      return height + paddingTop + paddingBottom + borderTop + borderBottom;
    },
    // 获取当前样式
    getStyle(element, att) {
      if (window.getComputedStyle) {
        // 优先使用W3C规范
        return window.getComputedStyle(element)[att];
      }
      // 针对IE9以下兼容
      return element.currentStyle[att];
    }
  }
};
</script>

<style scoped>
.pop-body {
  padding: 0 !important;
}
.number-box {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.scroll-box {
  width: 2rem;
  height: 4.32rem;
  z-index: 11002;
  font-size: 0.48rem;
}
.number-box .number-list {
}
.number-box .number-list li {
  height: 1.16rem;
  line-height: 1.16rem;
}
.number-box .number-list .item {
  margin-top: 0.42rem;
  color: rgba(102, 102, 102, 0.5);
}
.number-box .number-list .item.active {
  color: #fff;
  font-size: 0.6rem;
}
.underlying {
  flex-grow: 1;
  width: 100%;
  position: absolute;
  height: 1.16rem;
  top: 1.55rem;
  left: 0;
  z-index: 11001;
  background-color: #d11463;
}
.number-btn {
  border-radius: 0.56rem;
}
.number-footer {
  border-top: 0.01rem solid #e1e1e1;
  padding: 0.46rem 1.06rem;
}
</style>
